<template>
	<!-- <h1>发现</h1> -->
	<div class="nav">
		<Nav></Nav>
	</div>
	<div class="fuzhu1">
		<div class="top">
			<div class="top_left">
				<button>采集</button>
				<button>画板</button>
			</div>
			<ul>
				<li :style="{backgroundColor:bgcolor,color:textcolor}" @click="check" @mousemove="change_color" @mouseleave="restore">推荐</li>
				<li :style="{backgroundColor:bgcolor,color:textcolor}" @click="check" @mousemove="change_color" @mouseleave="restore">美食</li>
				<li :style="{backgroundColor:bgcolor,color:textcolor}" @click="check" @mousemove="change_color" @mouseleave="restore">宠物</li>
				<li :style="{backgroundColor:bgcolor,color:textcolor}" @click="check" @mousemove="change_color" @mouseleave="restore">摄影</li>
				<li :style="{backgroundColor:bgcolor,color:textcolor}" @click="check" @mousemove="change_color" @mouseleave="restore">游戏</li>
				<li :style="{backgroundColor:bgcolor,color:textcolor}" @click="check" @mousemove="change_color" @mouseleave="restore">汽车</li>
			</ul>
		</div>
		<div class="show">
			<!-- 每个组件做的事情是一样的，只是后端查找类型不一样 -->
			<!-- 优化：只一个组件，传一个值，存的是显示类型，组件请求时把值传过去 -->
			<!-- key:type，是为了让type的值改变后重新去加载一遍组件，接收新传的type值 -->
			<component :is='showtype' :msg='type' :key="type"></component>
			
			<!-- <router-link :to='{path:'/discovery/tuijian',query:{type}}'></router-link> -->
		</div>
	</div>
</template>

<script setup>
	import {getCurrentInstance,ref,reactive,onMounted} from 'vue'
	import Nav from './nav.vue'
	import showtype from '@/components/zjy/show_type.vue'
	let type = ref('推荐')
	let bgcolor = ref('#fff')
	let textcolor = ref('#000')
	
	let check = (event)=>{
		// 排他前先复原,背景颜色、字体颜色
		let lis = document.getElementsByTagName('li');
		for (let i = 0; i < lis.length; i++) {
			lis[i].style.backgroundColor = '#fff';
		    lis[i].style.color = '#000';
		}
		// 点击后背景颜色黑色，字体白色
		event.target.style.color = '#fff';
		event.target.style.backgroundColor = '#000';
		// 点击切换type的值
		type.value = event.target.innerText
		console.log('type的值',type.value)
	}
	let change_color = (event)=>{
		// 鼠标经过时，颜色改变
		event.target.style.color = '#6d6e70';
		event.target.style.cursor = 'pointer';
	}
	let restore = (event)=>{
		// 鼠标离开时，颜色复原
		if(event.target.style.backgroundColor == 'rgb(0, 0, 0)'){
			event.target.style.color = '#fff';
		}else {
			event.target.style.color = '#000';
		}
	}
</script>

<style scoped>
	.nav {
		position: absolute;
		top: 0;
		left: 30px;
	}
	.fuzhu1 {
		margin-top: 70px;
		margin-left: 100px;
	}
	.top {
		width: 1000px;
		/* border: 1px solid blue; */
		
		/* position: absolute;
		top: 80px;
		left: 100px; */
		
		/* margin: 0 auto; */
		display: flex;
		align-items: center;
	}
	.top_left {
		width: 130px;
		height: 50px;
		border: 1px solid #e7e7e7;
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.top_left button {
		width: 55px;
		height: 40px;
		border: none;
		border-radius: 16px;
		background-color: #EDF2F5;
	}
	.top ul {
		/* width: 500px;
		height: 40px; */
		/* border: 1px solid blue; */
		margin-left: 100px;
		display: flex;
	}
	.top li {
		width: 60px;
		height: 40px;
		border-radius: 20px;
		list-style: none;
		margin-left: 30px;
		text-align: center;
		line-height: 40px;
		font-weight: bolder;
		z-index: 1;
		/* color: #000; */
		/* color: #fff; */
		/* background-color: #000; */
		/* 鼠标经过时颜色 */
		/* #6D6E70 */
	}
	.show {
		width: 1030px;
		z-index: 1;
		
		/* margin: 0 auto; */
		
		/* position: absolute;
		top: 140px;
		left: 80px; */
	}
</style>